<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			
		
		
		.image-gallery {
		  display: flex;
		  justify-content: space-between;
		  align-items: center;
		 
		  padding: 10px 0px 10px 5px;
		  
		}
		
		.image-container {
		  position: relative;
		  width: 400px;
		  height: 500px;
		  overflow: hidden;
		}
		.first-image-container {
		      /* 第一个图片容器的单独样式 */
			  width: 700px;
		    }
		
		.image-container img {
		  width: 100%;
		  height: 100%;
		  transition: transform 0.3s;
		  border: 2px solid white;
		
		   
		  
		}
		
		.overlay {
		  position: absolute;
		  top: 0;
		  left: 0;
		  width: 100%;
		  height: 100%;
		  background-color: rgba(0, 0, 0, 0.5);
		  opacity: 0;
		  transition: opacity 0.3s;
		  opacity: 1;
		}
		
		.first-overlay {
		 
		  opacity: 0;
		}
		
		.image-container:hover img {
		  transform: scale(1.1);
		  
		}
		
		.image-container:hover .overlay {
		  opacity: 0;
		}

			
			.caption {
			  position: absolute;
			  bottom: 10px; /* 距离底部的距离 */
			  left: 10px; /* 距离左侧的距离 */
			  color: white;
			}
			.rightPictrue {
			  position: absolute;
			  bottom: 10px; /* 距离底部的距离 */
			  left: 100px; /* 距离左侧的距离 */
			  color: white;
			}
			
			
			.fc-DARK_RED {
			    color: #930000;
				margin-left: 10px;
			}
			.text-eyebrow {
			    font-size: 1.4rem;
			    font-weight: 600;
			    text-transform: uppercase;
			    font-family: 'Montserrat', sans-serif;
			}
			.large {
			      width: 700px; /* 悬停时的宽度 */
			    }
			
			    .small {
			      width: 300px; /* 悬停时的宽度 */
			    }
		</style>
		
		
		
	</head>
	<body>
		<div>
		<h2 class="text-eyebrow fc-DARK_RED">为您推荐</h2>
		<div class="image-gallery">
		  <div class="image-container first-image-container">
		    <img src="../../images/index-beihai.jpeg" alt="Image 1">
		    <div class="overlay first-overlay"></div>
			<dl class="caption">
			      <dt>北海道</dt>
			      <dd>日本最北端的岛屿，户外爱好者的天堂</dd>
			    </dl>
		  </div>
		  <div class="image-container ">
		    <img src="../../images/index-chongshen.jpeg" alt="Image 2">
		    <div class="overlay"></div>
			<dl class="rightPictrue">
			      <dt>冲绳</dt>
			    
			    </dl>
		  </div>
		  <div class="image-container">
		    <img src="../../images/index-daban.jpeg" alt="Image 3">
		    <div class="overlay"></div>
			<dl class="rightPictrue">
			      <dt>大阪</dt>
			    
			    </dl>
		  </div>
		  <div class="image-container">
		    <img src="../../images/index-qingshen.jpeg" alt="Image 4">
		    <div class="overlay"></div>
			<dl class="rightPictrue">
			      <dt>青森</dt>
			    
			    </dl>
		  </div>
		</div>
</div>
<script>
	document.addEventListener('DOMContentLoaded', function() {
	      var imageContainers = document.querySelectorAll('.image-container');
		 
	
	      imageContainers.forEach(function(container) {
	        container.addEventListener('mouseenter', function() {
				
	          container.classList.add('large');
	          var siblings = getSiblings(container);
	          siblings.forEach(function(sibling) {
				 
	            sibling.classList.add('small');
	          });
	        });
	
	        container.addEventListener('mouseleave', function() {
	          container.classList.remove('large');
	          var siblings = getSiblings(container);
	          siblings.forEach(function(sibling) {
	            sibling.classList.remove('small');
	          });
	        });
	      });
	
	      function getSiblings(element) {
	        var siblings = [];
	        var sibling = element.parentNode.firstChild;
	        while (sibling) {
	          if (sibling.nodeType === 1 && sibling !== element) {
	            siblings.push(sibling);
	          }
	          sibling = sibling.nextSibling;
	        }
	        return siblings;
	      }
	    });
	
</script>


	</body>
</html>